<template>
    <div class="statistics-region-two">
        <VChart ref="chartRef" :option="options"/>
        <div class="province">
            <span class="title">江苏省院:</span>
            <div class="data">
                <div>办案数量: {{ province.jwApplyDetailCount }}</div>
                <div>来访人员数量: {{ province.jwCheckInLoginCount }}</div>
                <div>执勤人数: {{ province.JwScheduleCount }}</div>
                <div>履职数量: {{ province.TaskStatCount }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import VChart from 'vue-echarts';
import {registerMap} from 'echarts';
import geoJson from '@/assets/map/jiangsu.json'
import {getMapData} from '@/api/Dashboard/StatisticsSection.js';

const mapName = 'jiangsu';
registerMap(mapName, geoJson);
const options = ref({
    tooltip: {
        trigger: 'item',
        // formatter: '{b}<br/>{c}'
        formatter: (item) => {
            return `${item.name}:<br/>办案数量:${item.data.jwApplyDetailCount}<br/>来访人员数量:${item.data.jwCheckInLoginCount}<br/>执勤人数:${item.data.JwScheduleCount}<br/>履职数量:${item.data.TaskStatCount}<br/>`
        }
    },
    visualMap: {
        min: 800,
        max: 50000,
        text: ['高', '低'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    },
    series: {
        name: '江苏省统计',
        type: 'map',
        map: mapName,
        label: {
            show: true
        },
        data: [
            // {name: '南京市', value: 32858},
            // {name: '苏州市', value: 17804},
            // {name: '无锡市', value: 6409},
            // {name: '常州市', value: 19120},
            // {name: '镇江市', value: 30946},
            // {name: '扬州市', value: 46198},
            // {name: '泰州市', value: 9302},
            // {name: '南通市', value: 32167},
            // {name: '盐城市', value: 22106},
            // {name: '淮安市', value: 34035},
            // {name: '宿迁市', value: 39482},
            // {name: '徐州市', value: 26063},
            // {name: '连云港市', value: 18981}
        ]
    }
});

const province = ref({})
const getData = async () => {
    const res = await getMapData();
    province.value = res.data.filter(item => item.depName === '江苏省院')?.[0]
    options.value.series.data = res.data.map(item => {
        const {depId, depName, ...rest} = item;

        return {
            ...item,
            name: item.depName.slice(0, -1),
            value: Object.values(rest).reduce((def, curr) => def + curr, 0),
        }
    });
}

onMounted(() => {
    getData()
})
</script>

<style scoped lang="scss">
.province {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 14px;
    line-height: 22px;

    .title {
        font-weight: bolder;
    }

    .data {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
</style>